import React, { useImperativeHandle, forwardRef, useState, useEffect } from 'react'
import { Button, Input, Form, Cascader, Switch } from 'react-vant'
import { useCascaderAreaData } from '@vant/area-data';
import { addressAdd, addressEdit, addressDelete } from '@/models'

export default forwardRef(function Addressinfo(props, ref) {
    const [form] = Form.useForm()
    const [footDOM, setFootDOM] = useState(<div></div>)
    const cascaderAreaData = useCascaderAreaData();
    useEffect(() => {
        if (props.type === 'ADD') {
            setFootDOM(<div style={{ margin: '16px 16px 0' }}>
                <Button round nativeType='submit' type='primary' block>
                    添加
                </Button>
                <br />
                <Button round plain onClick={() => props.setVisible(false)} type='danger' block>
                    取消
                </Button>
            </div>)
        } else if (props.type === 'EDIT') {
            setFootDOM(<div style={{ margin: '16px 16px 0' }}>
                <Button round nativeType='submit' type='primary' block>
                    修改
                </Button>
                <br />
                <Button round plain onClick={() => remove()} type='danger' block>
                    删除
                </Button>
            </div>)
        }
    }, [props.type])
    const onFinish = values => {
        console.log(values)
        if (props.type === 'EDIT') {
            let province = cascaderAreaData.find(item => item.value === values.area[0])
            let city = province.children.find(item => item.value === values.area[1])
            let county = city.children.find(item => item.value === values.area[2])
            let data = {
                userid: props.userId,
                name: values.name,
                tel: values.tel,
                province: province.text,
                city: city.text,
                county: county.text,
                addressDetail: values.addressDetail,
                isDefault: values.isDefault,
                addressid: props.addressid
            }
            addressEdit(data).then(res => {
                console.log(res);
                props.getAddressList()
                props.setVisible(false)
            })
        } else if (props.type === 'ADD') {
            let province = cascaderAreaData.find(item => item.value === values.area[0])
            let city = province.children.find(item => item.value === values.area[1])
            let county = city.children.find(item => item.value === values.area[2])
            let data = {
                userid: props.userId,
                name: values.name,
                tel: values.tel,
                province: province.text,
                city: city.text,
                county: county.text,
                addressDetail: values.addressDetail,
                isDefault: values.isDefault
            }
            addressAdd(data).then(res => {
                console.log(res);
                props.getAddressList()
                props.setVisible(false)
            })
        }

    }
    const remove = () => {
        addressDelete(props.addressid).then(res => {
            console.log(res);
            props.getAddressList()
            props.setVisible(false)
        })
    }
    useImperativeHandle(ref, () => {
        return {
            setFieldsValue: form.setFieldsValue
        }
    })

    return (
        <div style={{ padding: '16px 16px 50px' }}>
            <Form
                form={form}
                onFinish={onFinish}
                footer={footDOM}
            >
                <Form.Item
                    name='name'
                    label='姓名'
                    rules={[{ pattern: /[\u4e00-\u9fa5]{2,4}/, message: '请输入正确的姓名' }]}
                >
                    <Input placeholder='请输入姓名' />
                </Form.Item>
                <Form.Item
                    name='tel'
                    label='电话'
                    rules={[{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的电话号码' }]}
                >
                    <Input placeholder='请输入电话' />
                </Form.Item>
                <Form.Item name='area' label='地区' isLink>
                    <Cascader
                        popup={{ round: true }}
                        title='请选择所在地区'
                        options={cascaderAreaData}
                    >
                        {(_, selectedRows, actions) => (
                            <Input
                                value={selectedRows.map(el => el.text).join(',')}
                                readOnly
                                placeholder='请选择所在地区'
                                onClick={() => actions.open()}
                            />
                        )}
                    </Cascader>
                </Form.Item>
                <Form.Item name='addressDetail' label='详细地址'>
                    <Input.TextArea rows={3} autoSize maxLength={140} showWordLimit />
                </Form.Item>
                <Form.Item name='isDefault' label='设为默认收货地址' valuePropName='checked' controlAlign='right' labelWidth='10em'>
                    <Switch size={20} />
                </Form.Item>
            </Form>
        </div>
    )
})
